<template>
	<view>
		<view class="list">
			<view class="item">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>{{data.queryParams.city}}</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq flex_jc_cent">
					<image src="/static/q.png" mode=""></image>
					历史线下活动-{{ data.total }}场
				</view>
				<loadstatusVue :status="data.loadStatus">
					<view class="imgs" v-for="(item, index) in data.list" :key="index" @click="$pageGo(`/pages/activity/info?id=${item.id}`)">
						<image :src="item.imgFace" mode="aspectFill"></image>
						<view class="itemads">
							<view class="t_time flex">
								<view class="t1">{{ $formatTime(item.beginTime, 'year') }} {{ $formatTime(item.beginTime, 'month-day') }}</view>
								<view class="t"></view>
								<view class="t2">{{ $formatTime(item.beginTime, 'week-day') }} {{ $formatTime(item.beginTime, 'hours-minutes') }}</view>
							</view>
							<view class="b_1">{{ item.name }}</view>
							<view class="b_2 flex" v-if="item.lineType == 1">
								<image src="/static/i3.png" mode=""></image>
								<view class="texts">
									{{ item.platform }}
								</view>
							</view>
							<view class="b_2 flex" v-else>
								<image src="/static/i1.png" mode=""></image>
								<view class="texts">
									{{ item.addressInfo }}
								</view>
							</view>
						</view>
					</view>
				</loadstatusVue>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { homeHistoryListInfo } from '@/api/index.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	list: [],
	total: 0,
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		city: '',
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		data.total = res.total;
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await homeHistoryListInfo(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

onLoad((option) => {
	uni.setNavigationBarTitle({
		title: `${option.city}历史活动`
	});
	data.queryParams.city = option.city;
	getList();
});
</script>

<style lang="scss">
.list {
	.item {
		margin: 30rpx auto;
	}
	.imgflex {
		image {
			width: 60rpx;
			height: 60rpx;
		}
		text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			margin: 0 30rpx;
		}
	}
	.hq {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		width: 440rpx;
		height: 48rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 24rpx auto;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
	.imgs {
		width: 710rpx;
		height: 380rpx;
		border-radius: 20rpx;
		position: relative;
		margin: 20rpx auto;
		image {
			width: 710rpx;
			height: 380rpx;
			border-radius: 20rpx;
		}
		.itemads {
			position: absolute;
			top: 0%;
			width: 710rpx;
			height: 380rpx;
			border-radius: 20rpx;
			padding: 24rpx 22rpx;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.3);
			.t_time {
				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 12rpx;
					color: #ffffff;
					width: 32rpx;
					text-align: center;
				}
				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #ffffff;
				}
				.t {
					width: 4rpx;
					height: 24rpx;
					background: #b19561;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin: 0rpx 10rpx;
				}
			}
			.b_1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				margin-top: 225rpx;
			}
			.b_2 {
				margin-top: 15rpx;
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				.texts{
					flex:1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
	}
}
</style>
